<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title>onfinish callback</title>
<style type='text/css'>
div#outer {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  border: 1px solid black;
}

#rubber {
  position: absolute; 
  left: 0px;
  top: 0px;
  background: red;
  width: 25px;
  height: 25px;
}

</style>
<script  type='text/javascript' src='../../animation.js' ></script>
<script type='text/javascript'>
onload=function(){
  var ele   = document.getElementById('rubber');
  ele.style.left = "0px";
  ele.style.width = "25px";

  var trans1 = ele.createAnimation();
  var trans2 = ele.createAnimation();
  var trans3 = ele.createAnimation();
  var trans4 = ele.createAnimation();
  var trans5 = ele.createAnimation();
  var trans6 = ele.createAnimation();
  var trans7 = ele.createAnimation();
  var trans8 = ele.createAnimation();

  trans1.addAnimation('width','25px','300px');
  trans2.addAnimation('left','0px','275px');
  trans2.addAnimation('width','300px','25px');
  trans3.addAnimation('height','25px','300px');
  trans4.addAnimation('top','0px','275px');
  trans4.addAnimation('height','300px','25px');
  trans5.addAnimation('left','275px','0px');
  trans5.addAnimation('width','25px','300px');
  trans6.addAnimation('width','300px','25px');
  trans7.addAnimation('top','275px','0px');
  trans7.addAnimation('height','25px','300px');
  trans8.addAnimation('height','300px','25px');

  trans1.onfinish = function(){trans2.run()};
  trans2.onfinish = function(){trans3.run()};
  trans3.onfinish = function(){trans4.run()};
  trans4.onfinish = function(){trans5.run()};
  trans5.onfinish = function(){trans6.run()};
  trans6.onfinish = function(){trans7.run()};
  trans7.onfinish = function(){trans8.run()};
  trans8.onfinish = function(){trans1.run()};
  
  trans1.accelerationProfile=function(x){
    var sp = 1/25;
    return sp+x*x/900;
  };
  
  trans2.accelerationProfile = trans1.accelerationProfile;
  trans3.accelerationProfile = trans1.accelerationProfile;
  trans4.accelerationProfile = trans1.accelerationProfile; 
  trans5.accelerationProfile = trans1.accelerationProfile;
  trans6.accelerationProfile = trans1.accelerationProfile;
  trans7.accelerationProfile = trans1.accelerationProfile;
  trans8.accelerationProfile = trans1.accelerationProfile;   
  trans1.run();
}
</script>
</head>

<body>
<div id="outer">
<div id="rubber"></div>
</div>
 <p style="position: absolute; bottom: 1em; left: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </p>
</body>
</html>
